<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content=""/>
    <style type="text/css">
    	*{
    		padding: 0;
    		margin:0;
    	}
		#box{
			width:710px;
			height: 475px;
			margin: 0 auto; 
			position: relative;
		}
		#box img{
			width: 710px;
			height: 475px;
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
		#box ul{
			position: absolute;
			left: 265px;
			bottom: 30px;
			height: 10px;
		}
		#box ul li{
			list-style: none;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: #000;
			float: left;
			margin-right: 8px;
		}
    </style>
    <script type="text/javascript">
window.onload = function(){
	var img = document.getElementsByTagName('img');
	var lis = document.getElementsByTagName('li');
	var c=0;
	var timer;

	img[c].style.display = "block";
	lis[c].style.backgroundColor = "#A10000";

	function run(){
		c++;
		c = (c==7)?0:c;
		for(var i=0;i<img.length;i++){
			img[i].style.display = "none";
			lis[i].style.backgroundColor = "#000";
		}
		img[c].style.display = "block";
		lis[c].style.backgroundColor = "#A10000";
	}

	timer = setInterval(run,1000);
	for(var i=0; i<lis.length; i++){
		lis[i].xuhao = i;
		lis[i].onmouseover = function(){
			clearInterval(timer);
			c = this.xuhao;
			for(var i=0;i<img.length;i++){
				img[i].style.display = "none";
				lis[i].style.backgroundColor = "#000";
			}
			img[c].style.display = "block";
			lis[c].style.backgroundColor = "#A10000";
		}
		lis[i].onmouseout=function(){
			timer = setInterval(run,1000);
		}
	}
}
    </script>
    <title>新页面</title>
  </head>

 <body>
	<div id="box">
		<img src="images/1.jpg" alt="" />
		<img src="images/2.jpg" alt="" />
		<img src="images/3.jpg" alt="" />
		<img src="images/4.jpg" alt="" />
		<img src="images/5.jpg" alt="" />
		<img src="images/6.jpg" alt="" />
		<img src="images/7.jpg" alt="" />
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
 </body>
</html>